<template>
  <div class="wrapper">
    <el-dialog
      :visible="dialogVisible"
      :title="dialogType === 'new' ? '新建' : '编辑'"
      :before-close="beforeClose"
      width="75%"
      height="70%"
      :close-on-click-modal="false"
    >
      <SearchForm
        class="detialSearch"
        ref="searchForm"
        :rules="rules"
        :inline="true"
        :label-width="'150px'"
        :search-form="searchForm"
        :search-data="searchData"
        :search-handle="searchHandle"
        no-border="border:none"
      />
    </el-dialog>
  </div>
</template>
<script>
import SearchForm from "@/components/searchForm";
import Table from "@/components/Table/baseTable";
import { Task } from "@/api/task.js";
import { UserQuery, updateAndAdd } from "@/api/mange.js";

export default {
  name: "versionDialog",
  components: {
    Table,
    SearchForm,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogType: {
      type: String,
      default: "new",
    },
    dialogData: {
      type: Object,
      default: {},
    },
  },
  data() {
    let _this = this;
    return {
      rules: {},
      searchData: {
        relationProjectId: "",
        versionsNum: "",
        userId: "",
        expectUpdateTime: "",
      },
      searchForm: [
        {
          type: "Select",
          label: "项目:",
          options: [],
          prop: "relationProjectId",
          // disabled: true,
          clearable: true,
          InputWidth: "width:45%",
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Select",
          label: "更新人:",
          options: [],
          prop: "userId",
          clearable: true,
          InputWidth: "width:50%",
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Input",
          label: "版本号:",
          prop: "versionsNum",
          class: "versionsNumInp",
          class: "titleInp",
          clearable: true,
          clear: () => {},
          InputWidth: "width:100%",
          input: (val) => {},
        },
        {
          type: "DateTime",
          label: "预计更新时间:",
          prop: "expectUpdateTime",
          class: "titleInp",
          placeholder: "预计更新时间",
          clearable: true,
          InputWidth: "width:100%",
          clear: () => {},
          change: (val) => {},
        },
      ],
      searchHandle: [
        {
          type: "primary",
          label: "确定",
          handle: (item) => {
            if (this.dialogType == "new") {
              updateAndAdd(this.searchData).then((res) => {
                this.$emit("addTsk");
              });
              this.$emit("close");
            } else if (this.dialogType == "edit") {
              updateAndAdd({
                id: this.searchData.id,
                expectUpdateTime: this.searchData.expectUpdateTime,
                relationProjectId: this.searchData.relationProjectId,
                // 可更新内容字段
                renewableContent: this.searchData.renewableContent,
                userId: this.searchData.userId,
                versionsNum: this.searchData.versionsNum,
              }).then((res) => {
                this.$emit("addTsk");
              });
              this.$emit("close");
            }
          },
        },
        {
          type: "primary",
          label: "关闭",
          handle: () => {
            this.$emit("close");
          },
        },
      ],
    };
  },
  mounted() {
    this.queryTask();
    this.userQuery();
  },
  methods: {
    beforeClose(val) {
      this.$emit("close");
    },
    queryTask() {
      this.searchForm[0].options = [];
      Task({}).then((res) => {
        if (res.code == "200") {
          res.result.map((item) => {
            this.searchForm[0].options.push({
              label: item.projectName,
              value: item.id,
            });
          });
        }
      });
    },
    userQuery() {
      this.searchForm[1].options = [];
      UserQuery({}).then((res) => {
        res.result.map((item) => {
          this.searchForm[1].options.push({
            label: item.name,
            value: item.id,
          });
        });
      });
    },
  },
};
</script>
<style lang="scss">
.wrapper {
  .titleInp {
    .el-form-item__content {
      width: 76%;
      .text {
        width: 100%;
      }
    }
  }

  .detialSearch {
    .InlineBlock {
      display: flex;
      justify-content: end;
      margin-right: 8%;
    }
  }
}
</style>